<template>
	<div class="release allbgc">
		<div class="release-top alltop">
			发布
		</div>
		
		<van-form @submit="onSubmit" ref="regFrom">
			<van-field
				v-model="title"
				name="title"
				label="标题"
				placeholder="标题"
				:rules="[{ required: true, message: '填写标题' }]"
			/>
		    <van-field
				:value="cate_name"
				name="cate_name"
				label="分类"
				placeholder="请选择分类"
				readonly
				@click="catePickershow=true"
		    />
			<van-field
				v-model="content"
				name="content"
				label="内容"
				type="textarea"
				placeholder="内容"
				:rules="[{ required: true, message: '请填写内容' }]"
			/>
			
		  <!-- 上传 -->
		  <van-field label="图片" label-width="30px" name="fileList">
			  <template #input>
				  <!-- :max-size="500 * 1024"  表示图片最大上传500kb -->
				 <van-uploader v-model="fileList" multiple :max-size="500 * 1024" :max-count="3" />
			  </template>
		  </van-field>
		   
		  <div style="margin: 16px;">
		    <van-button round block type="info" native-type="submit" color="#07c160" style="width: 280px;height: 40px;font-size: 14px;margin: 0 auto;">提交</van-button>
		  </div>
		</van-form>
		<!-- 图标位置 -->
		<van-popup
		  v-model="catePickershow"
		  position="bottom"
		  :style="{ height: '40%' }"
		>
			<van-picker
			  title="请选择"
			  show-toolbar
			  :columns="cate"
			  @confirm="onConfirm"
			  @cancel="catePickershow=false"
			  value-key="name"
			/>
		</van-popup>
	</div>
</template>

<script>
	import {mapState} from 'vuex';
	import {addArticle,getUploadToken,uploadQiniu} from '../api/api.js'
	
	export default {
		data(){
			return{
				title:'',
				content:'',
				cate_id:'',
				cate_name:'',
				catePickershow:false,
				fileList:[]//vant 上传组件 接收数据
			}
		},
		computed:{
			...mapState(['cate','uid','userInfo'])
		},
		created() {
			this.$store.dispatch('getCate')
		},
		methods: {
			// picker确认onConfirm
			onConfirm(e){
				console.log(e);
				this.catePickershow=false;
				this.cate_name=e.name;
				this.cate_id=e._id;
			},
			// 专门上传
			async upload(fileList){
				// 判断一下有没有选择图片
				let imageSrc=[]
				if(!fileList || fileList.length === 0){
					//没上传图片
					return imageSrc
				}
				// 多图 需要循环
				// Promise.all([]) 多个异步任务都完成以后  返回他们完成后的结果 ; 数组里放多个Promise，都成功以后 把结果放在一个新的数组里，(需求  都完成以后再运行下面的代码)
				let task=fileList.map(v=>{
					return new Promise(async(resolve,reject)=>{
						let {file}=v;
						let { type } = file;
						//  拿到类型  比如jpg
						type = type.split('/')[1];  
						// 重新命名  随机名字 防止重复
						let file_name = `${new Date().getTime()}_${Math.random()
							.toString(36)
							.slice(2)}.${type}`;
						
						// 去服务器中申请一个 上传token
						// let { token } = await this.$http.post('/upload/token');
						let { token } = await getUploadToken();
						console.log(token);
						// 上传文件时 一般请求是post 因为要发body  content-type一定要写成motipart/formdata (告诉服务器 不编码 原样数据发送 分隔符把数据分开 后端收到数据就可以分割 解析拿到文件 存储文件 返回路径)
						// 在ajax里上传文件要用formdata
						// Ajax是对表单的模拟
						const formdata = new FormData();
						formdata.append('file', file);
						formdata.append('token', token);
						formdata.append('key', file_name);
						
						uploadQiniu(formdata).then(res=>{
							console.log(res);
							resolve(`http://toutiao.longxiaokj.com/`+ res.key)
							
						})
					})
				})
				// task [promises,promise]
				imageSrc= await Promise.all(task);
				return imageSrc
			},
			async onSubmit(values){
				console.log('submit',values);
				let {cate_id,uid,userInfo,fileList}=this;
				let {nickname}=userInfo;
				console.log(cate_id);
				console.log(uid);
				console.log(userInfo);
				
				console.log(nickname);
				// 需要把file传到服务器 服务器收到以后 存到服务器上  返回该图片在服务器上的地址
				
				if(!uid){
					this.$toast('请先登录')
					setTimeout(v=>{
						this.$router.push('/log')
					},500)
					return
				}
				
				//做判断 上传图片
				// fileList是vant给的相关文件
				let res= await this.upload(fileList)
				console.log(res);
			},
			afterRead(file) {
				// 此时可以自行将文件上传至服务器
				console.log(file);
			},
		},
		
	};
</script>

<style lang="less">
	.release input,
	.release textarea {
		width: 100%;
		border: none;
		padding-left: 10px;
	}
	.release-top{
		text-align: center;
	}
	.release .van-field__label{
		width: 40px;
	}
	.photo{
		text-align: center;
	}
	.photo button {
		width: 280px;
		height: 40px;
		font-size: 14px;
		color: #fff;
		background-color: @color;
		border: none;
		margin-top: 25px;
	}
</style>
